<script setup>
import { reactive, ref } from 'vue'
import router from '../../router';
import { addAdminApi } from "../../api/admin";
import { useRoute } from "vue-router";
import { getAllRoleListApi,getRoleListApi } from "../../api/role";

const formSize = ref('default')
const route = useRoute() 
//定义一个数组，存放从后端请求回来的角色数据
const roles=ref([])
//表单
const ruleForm = reactive({
  name: '',
  password: '',
  confirmPassword: '',
})
//获取角色数据
getRoleListApi({page: 1,count: 1000}).then(res=>{
  console.log(res);
  roles.value = res.data.data
})

//保存按钮
function saveForm() {
  const requestData = {
    ...ruleForm
  }
  addAdminApi(requestData).then(res => {
    router.push({name:"list-admin"})
    console.log(res);
  })
}

//取消按钮
function cancelForm() {
  ruleForm.name = ''
  ruleForm.password = ''
  ruleForm.confirmPassword = ''
  ruleForm.role = ''
  router.push({name:'list-admin'})
}

</script>


<template>
   <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item required label="用户名:" prop="name" :rules="{required: true, message: ''}" >
      <el-input v-model="ruleForm.name" size="small" style="width:215px"/>
    </el-form-item>
    <el-form-item label="密码:" prop="password" required :rules="{required: true, message: '密码必须包含数字字母'}">
      <el-input v-model="ruleForm.password" size="small" style="width:215px"/>
    </el-form-item>
    <el-form-item label="确认密码:" prop="confirmPassword" required :rules="{required: true, message: '两次密码不一致'}">
      <el-input v-model="ruleForm.confirmPassword" size="small" style="width:215px"/>
    </el-form-item>
    <el-form-item label="选择角色:" prop="role" required>
      <el-select  placeholder="请选择">
        <el-option v-for="role in roles" :key="role._id" :label="role.name" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveForm">保存</el-button>
      <el-button @click="cancelForm">取消</el-button>
    </el-form-item>
    </el-form>
    
</template>

<style scoped></style>
